import "../sass/myaddress.scss";

import { useParams, useNavigate } from "react-router-dom";
import {
    Popup,
    Cell,
    Radio,
    NavBar,
    Button,
} from "react-vant";

import { useState, useEffect } from "react";
import axios from "axios";
import { Edit } from "@react-vant/icons";

function Myaddress() {
    let navigate = useNavigate();
    //地址数据
    let [addressData, setAddressData] = useState([]);
    let [selectIndex, setSelectIndex] = useState(-1);
    //选择的地址数据
    let [selectAddressData, setSelectAddressData] =
        useState({
            phone: "",
            address: "",
            receiver: "",
        });

    //编辑地址
    let getbiandi = (item) => {
        let name = item.name;
        let aid = item.aid;
        let city = item.city;
        let province = item.province;
        let tel = item.tel;
        let addressDetail = item.addressDetail;
        let county = item.county;
        let postalCode = item.postalCode;
        let areaCode = item.areaCode;
        let isDefault = item.isDefault;

        axios({
            method: "post",
            url: "/editAddress",
            data: {
                aid,
                name,
                tel,
                province,
                city,
                county,
                addressDetail,
                areaCode,
                postalCode,
                isDefault,
            },
        })
            .then((res) => {
                console.log("res", res);
            })
            .catch((err) => {});
    };

    //获取地址数据
    let getAddressList = () => {
        axios({
            method: "get",
            url: "/findAddress",
        })
            .then((res) => {
                if (res.data.code === 700) {
                    return navigate("/login");
                }
                if (res.data.code === 20000) {
                    res.data.result.forEach(
                        (item, index) => {
                            item.address = `${item.province}${item.city}${item.county}${item.addressDetail}`;
                            //默认勾选默认地址
                            if (Boolean(item.isDefault)) {
                                setSelectIndex(index);
                                //修改选择地址数据
                                setSelectAddressData({
                                    phone: item.tel,
                                    address: item.address,
                                    receiver: item.name,
                                });
                            }
                        }
                    );
                    setAddressData(res.data.result);
                }
            })
            .catch((err) => {});
    };
    //选择地址
    let selectAddress = (index) => {
        setSelectIndex(index);
        let currentAddressData = addressData[index];
        //修改选择地址数据
        setSelectAddressData({
            phone: currentAddressData.tel,
            address: currentAddressData.address,
            receiver: currentAddressData.name,
        });
        //修改弹出层是否显示
        // setVisible(false);
    };

    useEffect(() => {
        getAddressList();
    }, []);

    return (
        <div className="myaddress">
            <NavBar
                title="我的地址"
                leftText="返回"
                rightText=""
                onClickLeft={() => navigate(-1)}
            />
            <div className="biao-ding">
                <div className="biao-bb">
                    <Cell title="我的地址" isLink />
                    <div className="address-info">
                        <div className="di-ren">
                            <div className="di-ziti">
                                {selectAddressData.receiver}
                            </div>
                            <div className="hui-di">
                                {selectAddressData.phone}
                            </div>
                        </div>
                        <div className="hui-di-ii">
                            {selectAddressData.address}
                        </div>
                    </div>
                </div>
            </div>
            <div className="xuan-di">
                <Radio.Group
                    value={selectIndex}
                    onChange={(index) => {
                        selectAddress(index);
                    }}
                >
                    {addressData.map((item, index) => {
                        return (
                            <div
                                className="my-di-zhi"
                                key={index}
                            >
                                <Cell
                                    center
                                    title={
                                        <div className="p-text">
                                            <div className="p-user">
                                                {item.name}
                                            </div>
                                            <div>
                                                {item.tel}
                                            </div>
                                        </div>
                                    }
                                    label={
                                        <div>
                                            {item.address}
                                        </div>
                                    }
                                    icon={
                                        <Radio
                                            checked={
                                                item.isCheck
                                            }
                                            checkedColor="#ee0a24"
                                            name={index}
                                        ></Radio>
                                    }
                                />
                                <div
                                    className="xiu-ico"
                                    onClick={() =>
                                        navigate(
                                            `/editaddress/${item.aid}`
                                        )
                                    }
                                >
                                    <Edit fontSize="20px" />
                                    <div></div>
                                </div>
                            </div>
                        );
                    })}
                </Radio.Group>
            </div>
            <div className="di-hou">
                <Button
                    round
                    block
                    type="primary"
                    onClick={() => {
                        navigate("/Address");
                    }}
                >
                    新增地址
                </Button>
            </div>
        </div>
    );
}
export default Myaddress;
